import React from "react"
import { ActionSheet } from "@taroify/core"
import type { ActionSheetActionObject } from "@taroify/core/action-sheet"

type IAction = {
  value: any
  name: React.ReactNode
  disabled?: boolean
  loading?: boolean
  /** @default false */
  danger?: boolean
  className?: string
  style?: React.CSSProperties
}
type IProps = {
  open: boolean
  actions: IAction[]
  closeFn(): void
  className?: string
  style?: React.CSSProperties
  rounded?: boolean
  title?: React.ReactNode
  /** @default true */
  showCancel?: boolean
  /** @default '取消' */
  cancelText?: React.ReactNode
  onSelect?(action: IAction): void
}
/**
 * @component GpActionSheet
 * @description 底部弹出菜单
 */
export default function GpActionSheet(props: IProps) {
  const {
    open,
    actions,
    closeFn,
    title,
    showCancel = true,
    cancelText = "取消",
    onSelect,
    ...rest
  } = props
  function handleSelect(event: ActionSheetActionObject) {
    closeFn()
    onSelect && onSelect(actions.find(action => action.value === event.value)!)
  }
  return (
    <ActionSheet open={open} {...rest} onSelect={handleSelect} onCancel={closeFn} onClose={closeFn}>
      {title && <ActionSheet.Header title={title} />}
      {actions.map(action => {
        const { danger = false, style, ...builtIns } = action
        const styleObj: React.CSSProperties = {
          ...style
        }
        if (danger) {
          styleObj.color = "#FA3F29"
        }
        return <ActionSheet.Action key={action.value} style={styleObj} {...builtIns} />
      })}
      {showCancel && <ActionSheet.Button type="cancel">{cancelText}</ActionSheet.Button>}
    </ActionSheet>
  )
}
